:root{--primary:#E1306C;--primary-hover:#C13584;--secondary:#F77737;--secondary-hover:#fa7e1e;--accent:#5851DB;--text:#1a1a1a;--bg:#fff;--shadow:#000;--pattern:rgba(0,0,0,0.05);--border-width:.25em;--font:'Outfit',sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background-color:var(--bg);color:var(--text);height:100vh;width:100vw;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}.bg-grid{position:absolute;inset:0;background-image:linear-gradient(to right,var(--pattern) 1px,transparent 1px),linear-gradient(to bottom,var(--pattern) 1px,transparent 1px);background-size:2rem 2rem;z-index:0}main{position:relative;z-index:10;width:100%;max-width:26em;padding:1rem;transition:font-size .3s ease}.card{--card-bg:#fff;position:relative;background:var(--card-bg);border:var(--border-width) solid var(--text);border-radius:1em;box-shadow:.6em .6em 0 var(--shadow);transition:transform .3s ease,box-shadow .3s ease;overflow:hidden;animation:float 6s ease-in-out infinite}.card:hover{transform:translate(-0.2em,-0.2em);box-shadow:.8em .8em 0 var(--shadow)}.card-header{background:linear-gradient(45deg,var(--primary),var(--accent));padding:1.5em;border-bottom:var(--border-width) solid var(--text);color:#fff;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}.card-header::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,0.1),rgba(0,0,0,0.1) .5em,transparent .5em,transparent 1em)}.brand{font-weight:800;font-size:1.4em;letter-spacing:-0.03em;position:relative;z-index:2;text-transform:uppercase}.status-badge{position:relative;z-index:2;display:flex;align-items:center;gap:.4em;background:rgba(255,255,255,0.2);padding:.4em .8em;border-radius:2em;border:1px solid rgba(255,255,255,0.3);font-size:.7em;font-weight:700;text-transform:uppercase;letter-spacing:.05em;backdrop-filter:blur(4px)}.status-dot{width:.5em;height:.5em;background-color:#4ade80;border-radius:50%;box-shadow:0 0 0 0 rgba(74,222,128,0.7);animation:pulse-green 2s infinite}.card-body{padding:1.5em;position:relative;z-index:2}.description{font-size:1em;line-height:1.4;font-weight:500;color:var(--text);margin-bottom:1.5em}.features{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-bottom:1.5em}.feat{display:flex;align-items:center;gap:.5em;font-size:.85em;font-weight:700}.feat-icon{width:1.5em;height:1.5em;background:var(--secondary);border:.12em solid var(--text);border-radius:.3em;display:flex;align-items:center;justify-content:center;box-shadow:.15em .15em 0 rgba(0,0,0,0.2)}.feat-icon svg{width:.9em;height:.9em;fill:#fff}.action-area{border-top:.15em dashed rgba(0,0,0,0.15);padding-top:1.2em;display:flex;justify-content:space-between;align-items:center;margin-top:.5em}.price{font-size:1.8em;font-weight:800;color:var(--text);position:relative;line-height:1}.price::after{content:"FREE";position:absolute;left:0;top:-0.5em;font-size:.4em;background:var(--accent);color:#fff;padding:.1em .3em;border-radius:.2em;transform:rotate(-5deg)}.price span{font-size:.4em;display:block;font-weight:600;opacity:.6;margin-top:.2em}.btn{background:var(--text);color:#fff;font-family:inherit;font-weight:700;font-size:1em;padding:.7em 1.5em;border:none;border-radius:.5em;cursor:pointer;position:relative;overflow:hidden;transition:all .2s;text-transform:uppercase;text-decoration:none;display:inline-block}.btn:hover{background:var(--primary);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,0.2)}.btn:active{transform:translateY(0)}small{display:block;text-align:right;font-size:.65em;margin-top:.8em;opacity:.7;font-weight:600}footer{position:absolute;bottom:1rem;width:100%;text-align:center;font-size:.75rem;font-weight:600;opacity:.6;z-index:10;pointer-events:none;padding:0 1rem}footer p{margin-bottom:.5em}footer a{color:inherit;text-decoration:none;pointer-events:auto;margin:0 .5em}footer a:hover{text-decoration:underline}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse-green{0%{box-shadow:0 0 0 0 rgba(74,222,128,0.7)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}@media(min-width:768px){main{font-size:1.3rem}}@media(max-width:400px){.card{width:100%}.features{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.card,.status-dot{animation:none}}.hidden{display:none!important}